import "./detailsscene.css"
import React, { useRef } from "react"
import { getSceneInfo } from "../../api/home"
import { Link, useParams, useNavigate, useLocation } from "react-router-dom"


function Detailsscene() {
    let params = useParams(); //获取链接数据
    let navigate = useNavigate();//链接跳转
    let location = useLocation();//链接值
    let [sceneInfo, setSceneInfo] = React.useState(null);
    React.useEffect(() => {
        // console.log(params);
        // 数据
        getSceneInfo(params.id).then(data => {
            console.log(data);
            setSceneInfo(data.data)
        })
    }, [])

    const pageView = useRef(null);

    const changeId = (id, e) => {
        pageView.current.scrollTop = 0;
        e.preventDefault();

        getSceneInfo(id).then(data => {
            console.log(data);
            setSceneInfo(data.data)
        })
    }

    return sceneInfo ? (
        <div className="scene" ref={pageView} style={{ height: '100vh', overflow: "scroll" }}>
            <div className="top">
                <div className="left">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                </div>
                <div>{sceneInfo.scene_title}</div>
                <div className="right">
                    <span className="iconfont icon-sort"></span>
                </div>
            </div>
            <div className="banner">
                <div className="loading-wrap">
                    <a href="">
                        <img src={sceneInfo.scene_background} />
                        <div className="banner-text">
                            <p className="txt-num">#{sceneInfo.dish_count}道菜#</p>
                            <p className="txt">{sceneInfo.scene_desc}</p>
                        </div>
                        <div className="bg"></div>
                    </a>
                </div>
            </div>
            {/* 相关菜谱 */}
            <div className="likeBox">
                <div className="goods-page">
                    <div className="box">
                        <ul>
                            {/* <li>
                                <div className="img">
                                    <img src="http://img.szzhangchu.com/1446295025659_2114043055.JPG@165h_240w_1e_1c.jpg" />
                                    <i className="icon"></i>
                                </div>
                                <div className="text">

                                    <h6>123123</h6>
                                    <span>123123123123</span>
                                    <div className="label-bar">
                                        <a href="" >
                                            <span>123</span>
                                        </a>

                                    </div>
                                </div>
                            </li> */}
                            {
                                sceneInfo.dishes_list.map(item => {
                                    return (
                                        <Link to={"/detailsvideo/" + item.dishes_id} key={item.dishes_id}>
                                            <li>
                                                <div className="img">
                                                    <img src={item.image} />
                                                    <i className="icon"></i>
                                                </div>
                                                <div className="text">

                                                    <h6>{item.dishes_name}</h6>
                                                    <span>{item.dishes_desc}</span>
                                                    <div className="label-bar">
                                                        {
                                                            item.tags_info && item.tags_info.map(item => {
                                                                return (
                                                                    <div className="div" key={item.id}>
                                                                        <span>{item.text}</span>
                                                                    </div>
                                                                )
                                                            })
                                                        }

                                                    </div>
                                                </div>

                                            </li>
                                        </Link>

                                    )
                                })
                            }


                        </ul>
                        {
                            sceneInfo.dish_count > 20 ? (<Link to={'/allnew/' + params.id}><div className="all-more">查看全部 ({sceneInfo.dish_count}道菜)<i className='iconfont icon-youbian'></i></div></Link>) : ("")
                        }

                    </div>
                </div>
            </div>

            {/* 更多场景 */}
            <div className="scenes-wrap">
                <div className="recommend">
                    <Link to={'/morescene'}>
                        <p className="recommend-title">
                            更多相关场景<i className='iconfont icon-youbian'></i>
                        </p>
                    </Link>
                </div>
                <div className="swiper-container">
                    {/* <div className="swiper-slide">
                        <a href="">
                            <img src="http://img.szzhangchu.com/1559099555306_2977796759.jpg@400h_320w_1e_1c.jpg"/>
                            <div className="sub-text">
                                <div className="sub-title">#宝宝水果餐#</div>
                                <div className="sub-nub">11道菜</div>
                            </div>
                            <div className="bg"></div>
                        </a>
                    </div> */}
                    {
                        sceneInfo.relates.map(item => {
                            return (
                                <div className="swiper-slide" key={item.scene_id}>
                                    <a href="" onClick={changeId.bind(this, item.scene_id)}>
                                        <img src={item.scene_background} />
                                        <div className="sub-text">
                                            <div className="sub-title">#{item.scene_title}#</div>
                                            <div className="sub-nub">{item.dishes_count}道菜</div>
                                        </div>
                                        <div className="bg"></div>
                                    </a>
                                </div>
                            )
                        })

                    }
                </div>
            </div>
        </div>
    ) : null
}

export default Detailsscene;